<template>
	<view class="flex-col page">
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col group">
				<image :src="$IMG_URL + '16557826909880786013.png'" class="image_1" />
				<view class="flex-col group_1">
					<view class="flex-col section_1">
						<view class="flex-row">
							<image :src="$IMG_URL + '16557826792503103103.png'" class="image_2" />
							<text class="text_1">审核/合同签约介绍</text>
						</view>
						<text class="text_2">
							由资深设计师帮你一起从空间布局、功能、风格、色彩搭配四大方面评判审阅设计师的成果，避免设计缺憾提升“个性化”设计品质！
						</text>
					</view>
					<view class="flex-col section_2">
						<view class="justify-between section_3" @click="go('/pages/index/editHourse?id='+projectId)">
							<text class="text_3">我的房屋信息</text>
							<image :src="$IMG_URL + '16557826925530282387.png'" @click="go('/pages/index/editHourse')"
								class="image_4" />
						</view>
						<view class="flex-col group_3">
							<view class="justify-between">
								<text class="text_4">房屋位置</text>
								<text class="text_5">{{ address }}</text>
							</view>
							<view class="flex-col group_5">
								<view class="justify-between">
									<text class="text_6">房屋面积</text>
									<text class="text_7">{{ roomArea }}m²</text>
								</view>
								<view class="justify-between group_7">
									<text class="text_8">房屋类型</text>
									<text class="text_9">{{ roomTypeName }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col section_4">
						<view class="flex-col group_8">
							<view class="flex-row group_9">
								<image :src="$IMG_URL + '16557826792503103103.png'" class="image_2" />
								<text class="text_10">审核签约类型</text>
							</view>
						</view>
						<!-- <view class="flex-row u-m-l-20">
							<radio-group class="uni-list" @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItems"
									:key="index">
									<view class="flex-row u-m-t-20">
										<view class="" style="">
											<label class="label-2-text" :for="item.name">
												<text>{{ item.value }}</text>
											</label>
											<image :src="$IMG_URL + '16557826926394646541.png'" class="image_6 image_8" />
											<view class="flex-row group_16">
												<text class="text_15">10/m²</text>
											</view>
										</view>

										<view class="flex-row" style="margin-left: 150px;">
											<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
										</view>
									</view>
								</label>
							</radio-group>
						</view> -->


						<view class="flex-row u-m-l-20">
							<radio-group class="uni-list" @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItem"
									:key="index">
									<view class="flex-row u-m-t-20">
										<view class="" style="">
											<label class="label-2-text">
												<text>{{ item.detailedName }}</text>
											</label>
											<image :src="$IMG_URL + '16557826926394646541.png'" class="image_6 image_8"
												@click.stop="showModal(index,item)" />
											<u-modal @confirm="close" :show="show" :title="title"
												:content='contentModal'></u-modal>
											<view class="flex-row group_16">
												<text class="text_15">
													<!-- 	{{item.cityLevel==1?item.firstPrice:(item.cityLevel==2?item.secondPrice:item.thirdPrice)}}/m² -->
													{{item.cityLeve}}
												</text>
												<text class="text_15">
													{{index === 0 ? item.firstPrice+'/m²' : item.firstPrice+'/次'}}
												</text>
											</view>
										</view>

										<view class="flex-row" style="margin-left: 150px;">
											<!-- <radio :value="values" :checked="index == 0" @click="dj(item)">
											</radio> -->
											<label>
												<checkbox value="index" :disabled="index == 0" :checked="index == 0"
													@click="dj(item,index)" />
											</label>
										</view>
									</view>
								</label>
							</radio-group>
						</view>
						<view class="flex-col group_12" v-if="coupon.length>0">

							<view class="flex-col">
								<view class="divider">
									<!--*-->
								</view>
								<view class="justify-between group_18" @click="couponShow=true">
									<text class="text_17">选择优惠券</text>
									<view class="flex-row">
										<text class="text_18">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
										<image :src="$IMG_URL + '16557838861113221762.png'" class="image_10" />
									</view>
								</view>

							</view>
						</view>
					</view>

					<view class="flex-col list">
						<view class="flex-col list-item">
							<view class="flex-row">
								<image :src="$IMG_URL + '16557826792503103103.png'" class="image_11" />
								<text class="text_20">服务流程</text>
							</view>
							<view class="flex-col items-start group_21">
								<u-parse :content="content.serviceProcess"></u-parse>
							</view>
						</view>
						<view class="flex-col list-item">
							<view class="flex-row">
								<image :src="$IMG_URL + '16557826792503103103.png'" class="image_11" />
								<text class="text_20">服务保障</text>
							</view>
							<view class="flex-col items-start group_21">
								<u-parse :content="content.serviceGuarantee"></u-parse>
							</view>
						</view>

					</view>
				</view>
			</view>
		</scroll-view>
		<view class="justify-between tab-bar">
			<view class="group_23">
				<text class="text_25">￥</text>
				<text class="text_26">{{ price }}</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center group_25" @click="go('/pages/my/message/kefu')">
					<image :src="$IMG_URL + '16557827948053418641.png'" class="image_17" />
					<text class="text_27">在线咨询</text>
				</view>
				<view class="flex-col items-center text-wrapper_1" @click="submits"><text class="text_28">确认</text>
				</view>
			</view>
		</view>
		<shop-coupon v-if="couponShow" :amount="price" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false, //！弹窗
				title: '',
				contentModal: '',
				coupon_id: 0,
				coupon: [],
				couponShow: false,
				couponAmount: 0,
				list_z2JJuXsK: [null, null],
				index: 0,
				radioItems: [{
						name: '0',
						value: '线上审核'
					},
					{
						name: '1',
						value: '线下陪签',
						checked: true
					}
				],
				radioItem: [],
				room_area: '',
				room_type: '',
				roomTypeName: '',
				district: '',
				address: '',
				projectId: '',
				roomArea: '',
				price: '0.00',
				contractExamineType: '0',
				values: '1',
				content: {}
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');
			this.coupon_id = 0;
			this.couponAmount = 0;
			this.rooms();
			this.getcontent();
			this.getCoupon();
		},
		methods: {
			close() {
				// 关闭!弹窗
				this.show = false
			},
			showModal(idx, item) {
				// 弹窗
				if (idx === 0) {
					this.title = item.value
					this.contentModal = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				} else {
					this.title = item.value
					this.contentModal = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				}
				this.show = true

			},
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;
				this.coupon_id = coupon_id;
				this.couponAmount = amount;
				this.couponShow = false;
				this.priceInfo(this.district, this.roomArea, couponsId, this.contractExamineType)
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 3
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			// 选中陪签
			dj(item, index) {
				console.log(item, index);
				if (index === 1) {
					item.select = !item.select
					this.coupon_id = 0;
					this.couponAmount = 0;
					if (item.select == true) {
						console.log('if执行');
						this.contractExamineType = '1'
						this.priceInfo(this.district, this.roomArea, 0, 1)
					} else {

						this.contractExamineType = '0'
						this.priceInfo(this.district, this.roomArea, 0, 0)
					}
					//刷新dom
					this.$forceUpdate()
				} else {
					this.$u.toast('此选项为默认')
				}

			},
			rooms() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {
						this.projectId = r.data.project.projectId;

						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName + r.data.project.position


						this.hetongType()
						this.priceInfo(this.district, this.roomArea, 0, 0)
					}




				});
			},
			hetongType() {
				this.$http('harryroom.getqueryServiceType', {
					areaId: this.district
				}).then(r => {
					console.log(r)
					if (r.code == 200) {
						this.radioItem = r.data
						console.log('shujv ', r);
					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			radioChange: function(e) {
				// this.contractExamineType = e.target.value;
			},
			priceInfo(areaId, citySize, id, isSelect) {
				this.$http('harryroom.calculations', {
					areaId: areaId,
					citySize: citySize,
					id: id,
					isSelect: isSelect
				}).then(r => {
					console.log(r)

					if (r.code = 200) {
						this.price = r.data
						// this.go('/pages/pay/pay?orderid='+r.data);
					} else {
						this.$u.toast(r.msg);
					}
				});

			},
			submits() {


				if (this.contractExamineType == 1) {
					var info = {
						projectId: this.projectId,
						contractExamineType: this.contractExamineType,
						// examineMoney:this.radioItem[0].price,
						offlineMoney: this.radioItem[1].price,
						money: this.price,
						id: this.coupon_id,
						isDis: this.coupon_id > 0 ? 1 : 0
					}
				} else {
					var info = {
						projectId: this.projectId,
						contractExamineType: this.contractExamineType,
						examineMoney: this.radioItem[0].price,
						money: this.price,
						id: this.coupon_id,
						isDis: this.coupon_id > 0 ? 1 : 0
					}
				}
				this.$http('harryroom.addsigning', info).then(r => {
					if (r.code = 200) {
						this.$u.toast(r.msg);
						this.go('/pages/pay/pay?orderid=' + r.data);
					} else {
						this.$u.toast(r.msg);
					}
				});
			}

		},

	};
</script>

<style scoped lang="scss">
	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-disabled:before {
		color: #ffff !important;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-disabled {
		background-color: #007aff;

	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #007aff;
		color: #ffff !important;
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		border-radius: 22px;
	}

	.u-m-t-20 {
		align-items: center;
		margin-bottom: 10px;
	}

	.scroll {
		height: calc(100vh - 199rpx);
	}

	.list-item {
		padding: 29rpx 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image_2 {
		margin-top: 12rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.group_21 {
		margin-top: 40rpx;
	}

	.image_6 {
		width: 28rpx;
		height: 28rpx;
	}

	.image_11 {
		margin-top: 14rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_20 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 32rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 11rpx 16rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #00000014;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group_1 {
		margin-top: -83rpx;
		padding: 0 24rpx;
		position: relative;
	}

	.group_23 {
		align-self: center;
		height: 38rpx;
	}

	.section_1 {
		padding: 29rpx 24rpx 68rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_4 {
		margin-top: 24rpx;
		padding-top: 29rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list {
		padding-top: 20rpx;
	}

	.text_25 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_26 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_25 {
		margin-bottom: 5rpx;
	}

	.text-wrapper_1 {
		margin-left: 56rpx;
		margin-top: 5rpx;
		padding: 20rpx 0 25rpx;
		background-color: #1d6aff;
		border-radius: 36rpx;
		width: 220rpx;
		height: 72rpx;
	}

	.text_2 {
		margin-top: 34rpx;
		color: #666666;
		font-size: 26rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 30rpx;
		text-align: left;
	}

	.section_3 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_3 {
		padding: 30rpx 22rpx 41rpx 24rpx;
	}

	.group_8 {
		padding: 0 24rpx;
	}

	.group_12 {
		margin-top: 41rpx;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.image_17 {
		flex-shrink: 0;
		width: 54rpx;
		height: 54rpx;
	}

	.text_27 {
		color: #666666;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_28 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_1 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_4 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.group_5 {
		margin-top: 39rpx;
	}

	.group_9 {
		padding-bottom: 34rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_10 {
		margin-top: 30rpx;
	}

	.group_11 {
		margin-top: 26rpx;
	}

	.group_13 {
		padding: 0 24rpx 35rpx;
	}

	.text_4 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_7 {
		margin-top: 33rpx;
	}

	.text_10 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_11 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin-left: 15rpx;
		margin-top: 8rpx;
	}

	.text_12 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_13 {
		margin-left: 25rpx;
		margin-bottom: 9rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.image_9 {
		align-self: center;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
	}

	.divider {
		margin: 0 24rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.group_18 {
		padding: 30rpx 24rpx 35rpx;
	}

	.text-wrapper {
		padding: 20rpx 0 36rpx;
		background-color: #ff371d0f;
		border-radius: 0px 0px 16rpx 16rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_13 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_23 {
		margin-top: 30rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_14 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.text_6 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_16 {
		margin-top: 26rpx;
	}

	.text_17 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_19 {
		margin-top: 6rpx;
	}

	.text_19 {
		margin-left: 24rpx;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.text_14 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_8 {
		margin: 8rpx 134rpx 0 15rpx;
	}

	.text_15 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_16 {
		margin-left: 25rpx;
		margin-bottom: 9rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_18 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_10 {
		margin: 3rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}
</style>
